<template>
    <h2 align="center">
        <d style="color: floralwhite;">
            智慧农业—智慧畜牧育种管理平台</d>
    </h2>

    <body>

        <div class="centent">

            <div class="centent1">
                <d>欢迎您登录</d>
            </div>
            <div class="centent2">
                <div class="img">
                    <el-form ref="ruleFormRef" style="max-width: 300px;margin-left: 10%;" :model="ruleForm"
                        :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
                        <el-form-item label="" prop="Account">
                            <el-input v-model="ruleForm.Account" />
                        </el-form-item>
                        <el-form-item label="" prop="Password">
                            <el-input v-model="ruleForm.Password" show-password />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" style="width: 100%;" @click="submitForm(ruleFormRef)">
                                登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>

    </body>

</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'


const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    Account: '',
    Password: '',
})


//校验规则
const rules = reactive<FormRules>({
    Account: [
        { required: true, message: '用户名不能为空', trigger: 'blur' },
        //密码和数字组合，长度在 3 到 6 个字符
        { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{3,6}$/, message: '密码和数字组合，长度在 3 到 6 个字符', trigger: 'blur' },

    ],
    Password: [
        {
            required: true,
            message: '密码名不能为空',
            trigger: 'change',
        },
        //密码和数字组合，长度在 6 到 12 个字符
        { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,12}$/, message: '密码和数字组合，长度在 3 到 6 个字符', trigger: 'blur' },
    ],

})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}



</script>
<style>
body {
    background: url(../assets/登录.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
}

circle {
    width: 400px;
    height: 50px;
    text-align: center;
    line-height: 45px;
    color: #eff1f8;
    font-family: "楷体";
    font-size: 30px;
    background-color: rgba(71, 72, 74, 0.7);

}

/* 
.nav {
    width: 100%;
    height: 100px; 
    position: absolute;
    top: 0;
    left: 0;
    font-size: 30px;
    text-align: left;

}

.nav b {
    margin-left: 33%;
    margin-top: 15%;
    margin-top: 30px;
    color: cornsilk;
    font-family: "楷体";
} */

.centent {
    width: 400px;
    height: 300px;
    margin-left: 50%;
    margin-top: 160px;
    background-color: rgba(71, 72, 74, 0.7);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.centent1 {
    width: 400px;
    height: 50px;
    text-align: center;
    line-height: 45px;
    color: #eff1f8;
    font-family: "楷体";
    font-size: 30px;
    background-color: rgba(71, 72, 74, 0.7);

}

.centent2 {
    width: 400px;
    height: 140px;
    margin-top: 30px;

}

.centent2 img {
    width: 40px;
    height: 35px;
    float: left;
    opacity: 0.7;
    margin-top: 25px;
    margin-left: 50px;
}

/* .centent2 input {
    font-size: 15px;
    margin-top: 25px;
    background-color: rgb(131, 131, 120);
} */

.input1 {
    margin-top: 5px;
    text-align: center;
}

.input1 input {
    font-size: 20px;
    background-color: rgba(122, 125, 127, 0.5);
}

.bottom {
    width: 400px;
    margin-top: 20px;
    height: 114px;
}

.bottom img {
    width: 400px;
    height: 120px;
    opacity: 0.4;

}
</style>